<template>
	<view class="container-bottom-btns">
		<view class="form">
			<view class="form-row-item">
				<view class="label">用户类型</view>
				<view class="content">
					<input type="text" v-model="userType" disabled/>
				</view>
			</view>
			<view class="form-row-item">
				<view class="label">用户名称</view>
				<view class="content">
					<input type="text" v-model="userInfo.nickname" disabled/>
				</view>
			</view>
			<view class="form-row-item">
				<view class="label">举报类型</view>
				<view class="picker-content" @tap="$refs.reportType.open()">
					<view :class="{'placeholder-picker': !form.reportType, 'picker-text': form.reportType}">
						{{form.reportType ? reportTypeStr : '请选择举报类型'}}
					</view>
					<u-icon name="arrow-down"></u-icon>
				</view>
			</view>
			
			<view class="form-row-item">
				<view class="label">补充说明</view>
				<view class="content">
					<input type="text" v-model="form.reportContent" placeholder="请输入"/>
				</view>
			</view>
		</view>
		
		<view class="bottom-btn-wrapper">
			<SubmitBtn text="提交" @tap="submit"></SubmitBtn>
		</view>
		
		
		<OnePicker ref="reportType" keyName="label" :columns="reportTypeArr" @pickerConfirm="reportTypeConfirm"></OnePicker>
	</view>
</template>

<script>
	import { getReportList, initiateReport } from '@/api/common.js'
	import { mapGetters } from 'vuex'
	import validate from '@/utils/validate.js'
import { toast } from '../../utils/uni-api';
	export default {
		data() {
			return {
				form:{
					productId: '',
					reportType: '',
					reportContent: ''
				},
				reportTypeArr:[]
			};
		},
		onLoad(option){
			this.form.productId = option.id
			this.getReportList()
		},
		computed:{
			reportTypeStr(){
				return this.form.reportType ? this.reportTypeArr[0].find(item => item.value === this.form.reportType).label : ''
			},
			userType(){
				return this.userInfo.isFirm == 1 ? '企业' : '个人'
			},
			...mapGetters(['userInfo'])
			
		},
		methods:{
			reportTypeConfirm(e) {
				console.log(e);
				this.form.reportType = e.value.value
			},
			getReportList(){
				getReportList({pageNo: 1, pageSize: 999}).then(res => {
					this.reportTypeArr.push(res.result.records.map(item => ({label: item.reportType, value: item.reportType})))
				})
			},
			submit(){
				if(!validate.isNotEmpty(this.form.reportType, '举报类型')) return
				if(!validate.isNotEmpty(this.form.reportContent, '补充说明')) return
				initiateReport(this.form).then(res => {
					toast('提交成功', true)
					setTimeout(() => {
						uni.navigateBack()
					}, 800)
				})
			}
		}
	}
</script>

<style lang="scss">
	.container-bottom-btns{
		
		.form{
			margin: 0;
			padding: 0;
			
			.form-row-item{
				padding: 40rpx 0;
			}
		}
	}
</style>
